<template>
  <div class="login-page">
    <div class="login-box">
      <div class="login-logo"></div>
      <el-form :model="loginForm"  :rules="rules" ref="loginForm">
        <el-form-item prop="username">
          <div class="input-box">
            <i class="el-icon-mobile-phone login-icon" /><el-input
              placeholder="请输入账号"
              v-model="loginForm.username"
              autocomplete="off"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div class="input-box">
            <i class="el-icon-lock login-icon" /><el-input
              placeholder="请输入密码"
              show-password
              type="password"
              v-model="loginForm.password"
              autocomplete="off"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="code">
          <div class="input-box">
            <i class="el-icon-chat-line-round login-icon" />
            <el-input
              placeholder="请输入验证码"
              v-model="loginForm.code"
            >
               <template #suffix>
              <el-image
                style="width: 130px; height: 52px; margin-right:-5px"
                :src="`https://likede2-java.itheima.net/api/user-service/user/imageCode/${imageSrc}`"
                @click="getNewCode"
              >
              <template #error>
                  <i class="el-icon-picture-outline" />
                </template>
              </el-image>
            </template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="submitForm()"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import nanoid from "@/api/getRandom";
export default {
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "admin",
        code: "",
      },
      imageSrc: "",
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            pattern: /^[\w-]{4,16}$/,
            message: "请输入正确的用户名",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 5, max: 16, message: "密码在6~16位", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            pattern:/^[A-Za-z0-9]{4}$/,
            message: "请输入正确的验证码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.imageSrc = nanoid()
  },
  methods: {
    async submitForm() {
      await this.$refs.loginForm.validate();
      await this.$store.dispatch('user/login', {
        loginName:this.loginForm.username,
        password:this.loginForm.password,
        code:this.loginForm.code,
        clientToken:this.imageSrc,
        loginType:0
        })
        this.$router.push('/')
    },
    getNewCode(){
      this.imageSrc = nanoid()
    }
  },
};
</script>

<style lang="scss" scpoed>
.login-page {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(../../assets/background.png);
  background-size: cover;
  background-repeat: no-repeat;
  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 518px;
    height: 388px;
    padding: 76px 35px 0;
    margin-top: -194px;
    margin-left: -259px;
    background-color: #fff;
    border-radius: 10px;
    .input-box {
      display: flex;
      align-items: center;
      border: 1px solid #e2e2e2;
      border-radius: 5px;
      .login-icon {
        color: #999999;
        margin-left: 10px;
        font-size: 16px;
      }
      .el-input__inner {
        border: none;
        height: 52px;
      }
    }

    .login-btn {
      width: 100%;
      height: 52px;
      background: linear-gradient(262deg, #2e50e1, #6878f0);
      opacity: 0.91;
      border-radius: 8px;
      color: #fff;
      text-shadow: 0 7px 22px #cfcfcf;
    }

    .login-logo {
      position: absolute;
      top: -48px;
      left: 50%;
      margin-left: -48px;
      width: 96px;
      height: 96px;
      background-image: url(../../assets/logo.png);
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
}
</style>
